import { useState, useEffect } from 'react'

import { useNavigate } from 'react-router-dom';

import { NavBar, } from 'antd-mobile'

import { getNews } from '../../api/request';

import styles from './index.module.scss'

export default function Information() {
  const navigate = useNavigate();
  // 最新资讯
  const [newsList, setnews] = useState([]);
  const back = () => {
    navigate(-1);
  }
  // 最新资讯
  const get_news = async (value) => {
    const res = await getNews(value);

    setnews(res.data.body);
  }
  useEffect(() => {
    get_news();
  }, [])
  return (
    <div className={styles.information}>
      <NavBar onBack={back}>资讯</NavBar>
      <hr />
      {/* 最新资讯 */}
      <div className={styles.information}>

        <div className={styles.info_content}>
          {
            newsList.map((item) => (<div className={styles.info_item} key={item.id}>
              <img src={`http://localhost:8080${item.imgSrc}`} alt="" />
              <div className={styles.info_item_right}>
                <span style={{ fontWeight: 'bold', paddingRight: '8px' }}>{item.title}</span>
                <div className={styles.info_info}>
                  <span className={styles.from}>{item.from}</span>
                  <span className={styles.date}>{item.date}</span>
                </div>
              </div>
            </div>))
          }
        </div>
      </div>
    </div>
  )
}
